import { View, Swiper, SwiperItem } from '@tarojs/components'
import { AtFloatLayout, AtIcon } from "taro-ui"
import { useState, useCallback } from 'react'
import { useDispatch } from 'react-redux'
import FloatBtn from "../../components/float-btn/index"
import ClothesCard from '../../components/clothes-card/index'
import DetailCard from '../../components/detail-card/index'
import TitleBar from '../../components/title-bar'

import './index.less'
import CollectionSquare from './collection-square'

const titles = ['工作', '休闲', '聚会', '运动']
const details = [
  {
    occasion: { text: '工作', val: 0 },
    season: { text: '夏季', val: 0 },
    tag: { text: '文艺', val: 0 },
    remark: '',
  },
  {
    occasion: { text: '工作', val: 0 },
    season: { text: '冬季', val: 0 },
    tag: { text: '文艺', val: 0 },
    remark: '',
  },
  {
    occasion: { text: '聚会', val: 0 },
    season: { text: '夏季', val: 0 },
    tag: { text: '时尚', val: 0 },
    remark: '',
  },
]

export default function Collection() {
  const [open, setOpen] = useState(false)
  const [current, setCurrent] = useState(0)
  const [index, setIndex] = useState(1)
  const dispatch = useDispatch();

  const titleBarRef = useCallback(v => { setCurrent(v?.current ?? 0) }, [])

  function handleClick(val: boolean) {
    setOpen(val)
    dispatch({ type: 'TABBERVISIBLE', val: !val })
  }

  return (
    <View className='collection'>
      <View className='title-bar-wrap'><TitleBar ref={titleBarRef} titles={[{ title: '我的搭配' }, { title: '搭配广场' }]} /></View>
      {
        current == 0 ?
          <View className='clothes-card-wrap'>
            {
              titles.map((v, k) =>
                <ClothesCard title={v} onClick={() => handleClick(true)} key={k} />
              )
            }
          </View> :
          <View className='collection-square-wrap'><CollectionSquare /></View>
      }
      <AtFloatLayout isOpened={open} title='' onClose={() => handleClick(false)}>
        <View className='float-layout'>
          <View className='swiper-wrap'>
            <Swiper className='swiper' indicatorDots circular onChange={() => console.log('!!!')}>
              {
                details.map((v, k) => {
                  return <SwiperItem key={k} className='swiper-item' >
                    <DetailCard />
                  </SwiperItem>
                })
              }
            </Swiper>
          </View>
          {/* 底部工具栏 */}
          <View className='at-row at-row__justify--around bottom-panel'>
            <AtIcon value='close' size='20' onClick={() => handleClick(false)}></AtIcon>
            <AtIcon value='edit' size='20'></AtIcon>
          </View>
        </View>
      </AtFloatLayout>
      <FloatBtn icon='add' />
    </View >
  )
}